<template>
    <div class="app-marketplace">
      <!-- 顶部导航栏 -->
      <div class="header">
        <div class="title">应用广场</div>
        <div class="search-create">
          <n-input-group>
            <n-input placeholder="输入关键词" v-model:value="searchKeyword" @blur="searchApplicationList">
              <template #prefix>
                <n-icon><div class="i-hugeicons:search-01"></div></n-icon>
              </template>
            </n-input>
          </n-input-group>
          <!-- <n-button type="primary" class="create-button">
            <template #icon>
              <n-icon><div class="i-hugeicons:add-01"></div></n-icon>
            </template>
            创建智能体
          </n-button> -->
        </div>
      </div>
  
      <!-- 分类标签 -->
      <div class="category-tabs">
        <div 
          v-for="(category, index) in categories" 
          :key="index" 
          :class="['category-tab', { active: activeCategory === category.value }]"
          @click="activeCategory = category.value"
        >
          {{ category.label }}
        </div>
      </div>
     <!-- 应用列表 -->
<div class="app-list">
  <!-- 用过的应用 -->
  <div class="app-section" v-if="activeCategory === 'used'">
    <div class="app-grid">
      <div class="app-card" v-for="(app, index) in useOfficialApps" :key="index" @click="chooseApps(app)">
        <div class="app-icon" :style="{ backgroundColor: app.iconBackground || '#3498db' }">
          <!-- 根据iconType判断显示方式 -->
          <template v-if="app.iconType === 'emoji'">
            <span class="emoji-icon">{{ app.icon }}</span>
          </template>
          <template v-else>
            <img :src="app.icon" :alt="app.name" />
          </template>
        </div>
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-desc">{{ app.description }}</div>
          <div class="app-provider">来自 {{ app.provider || 'Dify' }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 官方推荐 -->
  <div class="app-section" v-if="activeCategory === 'official' || activeCategory === 'used'">
    <div class="section-title" v-if="activeCategory === 'used'">我的应用</div>
    <!-- 修改应用卡片中的图标显示部分 -->
    <div class="app-grid">
      <div class="app-card" v-for="(app, index) in officialApps" :key="index" @click="chooseApps(app)">
        <div class="app-icon" :style="{ backgroundColor: app.iconBackground || '#3498db' }">
          <!-- 根据iconType判断显示方式 -->
          <template v-if="app.iconType === 'emoji'">
            <span class="emoji-icon">{{ app.icon }}</span>
          </template>
          <template v-else>
            <img :src="app.icon" :alt="app.name" />
          </template>
        </div>
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-desc">{{ app.description }}</div>
          <div class="app-provider">来自 {{ app.provider || 'Dify' }}</div>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
  </template>
  
  <script lang="tsx" setup>
  import { ref } from 'vue'
  import { NButton, NInput, NInputGroup, NIcon } from 'naive-ui'
  import * as GlobalAPI from '@/api'
import { on } from 'events'

  // 搜索关键词
  const searchKeyword = ref('')
  
  // 当前激活的分类
  const activeCategory = ref('used')
  
  // 分类列表
  const categories = [
    { label: '用过', value: 'used' },
    { label: '我的应用', value: 'official' },

  ]
  
  // 官方推荐应用
  const   officialApps = ref(
    [] 
  )
  const useOfficialApps = ref([])

  const getAppsList = async () => {
  let name = ''
  const res = await GlobalAPI.getAppsList(name)
  const json = await res.json()
  console.log(json['oth'], 'json123 ')
  if (json['oth'] !== undefined) {
    console.log(json.content,'1233333')
    // 处理返回的数据，确保每个应用都有必要的字段
    const processedApps = json['oth'].map(app => ({
      ...app,
      // 如果没有provider字段，设置默认值
      provider: app.provider || 'Dify',
      // 确保iconBackground有值，如果没有则使用默认值
      iconBackground: app.iconBackground || '#3498db',
      // 如果没有iconType字段，根据icon的格式推断
      iconType: app.iconType || (typeof app.icon === 'string' && app.icon.length <= 2 ? 'emoji' : 'image')
    }))
    officialApps.value = processedApps
  }
  if (json['use'] !== undefined) {
    console.log(json.content,'1233333')
    // 处理返回的数据，确保每个应用都有必要的字段
    const processedApps = json['use'].map(app => ({
      ...app,
      // 如果没有provider字段，设置默认值
      provider: app.provider || 'Dify',
      // 确保iconBackground有值，如果没有则使用默认值
      iconBackground: app.iconBackground || '#3498db',
      // 如果没有iconType字段，根据icon的格式推断
      iconType: app.iconType || (typeof app.icon === 'string' && app.icon.length <= 2 ? 'emoji' : 'image')
    }))
    useOfficialApps.value = processedApps
  }
}
const searchApplicationList = async () => {
  let name = searchKeyword.value
  const res = await GlobalAPI.getAppsList(name)
  const json = await res.json()
  console.log(json['oth'], 'json123 ')
  if (json['oth'] !== undefined) {
    console.log(json.content,'1233333')
    // 处理返回的数据，确保每个应用都有必要的字段
    const processedApps = json['oth'].map(app => ({
      ...app,
      // 如果没有provider字段，设置默认值
      provider: app.provider || '官方',
      // 确保iconBackground有值，如果没有则使用默认值
      iconBackground: app.iconBackground || '#3498db',
      // 如果没有iconType字段，根据icon的格式推断
      iconType: app.iconType || (typeof app.icon === 'string' && app.icon.length <= 2 ? 'emoji' : 'image')
    }))
    officialApps.value = processedApps
  }
  if (json['use'] !== undefined) {
    console.log(json.content,'1233333')
    // 处理返回的数据，确保每个应用都有必要的字段
    const processedApps = json['use'].map(app => ({
      ...app,
      // 如果没有provider字段，设置默认值
      provider: app.provider || '官方',
      // 确保iconBackground有值，如果没有则使用默认值
      iconBackground: app.iconBackground || '#3498db',
      // 如果没有iconType字段，根据icon的格式推断
      iconType: app.iconType || (typeof app.icon === 'string' && app.icon.length <= 2 ? 'emoji' : 'image')
    }))
    useOfficialApps.value = processedApps
  }
}

const chooseApps = (app) => {
  emit('select-app', app)
  window.$ModalMessage.success(`应用切换成功`)
}
const emit = defineEmits(['select-app'])

 onMounted(()=>{
  getAppsList()
 })
  </script>
  
  <style scoped>
  .app-marketplace {
    padding: 20px;
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 24px;
    font-weight: bold;
  }
  
  .search-create {
    display: flex;
    gap: 10px;
  }
  
  .create-button {
    white-space: nowrap;
  }
  
  .category-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
    overflow-x: auto;
  }
  
  .category-tab {
    cursor: pointer;
    padding: 8px 0;
    position: relative;
    color: #666;
  }
  
  .category-tab.active {
    color: #000;
    font-weight: bold;
  }
  
  .category-tab.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1890ff;
  }
  .app-list{
    height: 500px;
    overflow: auto;
    padding-bottom: 10px;
  }
  .app-section {
    margin-bottom: 30px;
  }
  
  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  .app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .app-card {
    display: flex;
    padding: 15px;
    background-color: #f3f3f3;  /* 修改背景颜色从 white 到 #f3f3f3 */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
  }
  
  .app-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .app-icon {
    width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 15px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  .app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .emoji-icon {
  font-size: 28px;
  line-height: 1;
}
  .app-info {
    flex: 1;
  }
  
  .app-name {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .app-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 91%;
  }
  
  .app-provider {
    font-size: 12px;
    color: #999;
  }
  </style>